<template>
  <div style="height:100%; overflow:auto;">
    <keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

    <!-- actionsheet全局方法组件 -->
    <actionsheet
      v-model="visibleActionSheet"
      v-bind="actionSheet.options"
      @on-click-menu="actionSheet.onClick"
      @on-click-menu-cancel="actionSheet.onCancel"
      @on-click-mask="actionSheet.onMask"
    ></actionsheet>

    <!-- vux没有单独的下popup-picker，这个会自带一个cell栏，只好手动隐藏(定位定走) -->
    <popup-picker v-model="pickerVal" title="_" :data="pickerData" class="hidePicker" ref="picker" :columns="1" @on-hide="pickerHide"></popup-picker>

    <!-- ui风格confirm -->
    <confirm :title="confirm.title" :content="confirm.content" v-if="confirm.visible" @cancel="confirm.cancel" @check="confirm.check"></confirm>

    <transition name="fade"><div class="com-mask" v-show="visibleMask" @click="hideMask"></div></transition>

    <!-- loading提示 -->
    <transition name="fade"><spinner class="com-ab-center" v-show="visibleSpinner" :type="spinnerType"></spinner></transition>
  </div>
</template>

<script>
import { Toast, Actionsheet, Spinner, PopupPicker } from 'vux';
import wx from 'weixin-js-sdk';
import Confirm from '@c/alert/Confirm';
import mountVuxAlerts from './config/vuxAlerts.js';
import alertMounted from './config/alertMounted.js';
import './config/api.js';

export default {
  components: {
    Actionsheet,
    Spinner,
    PopupPicker,
    Confirm
  },
  data() {
    return {
      visibleActionSheet: false,
      actionSheet: {
        options: {},
        onClick: new Function(),
        onCancel: new Function(),
        onMask: new Function()
      },

      pickerVal: [],
      pickerData: [],
      pickerHide: new Function(),

      confirm: {
        title: '',
        content: '',
        cancel: new Function(),
        check: new Function(),
        visible: false
      },

      visibleMask: false,
      hideMask: new Function(),

      visibleSpinner: false,
      spinnerType: 'crescent'
    };
  },

  mounted() {
    // 挂载通知方法
    mountVuxAlerts(this);
    window._alert = this.$alert;

    // 封装的通知方法已挂载完毕（api management也已经挂载完毕）
    alertMounted(this);
  },

  watch: {
    $route() {
      //  _api('wechat/config',
      //   { ...(navigator.userAgent.indexOf('iPhone') > -1 ? {} : { url: location.href }) }
      //  ).then(config =>{
      //   wx.config(config)
      //   wx.ready(() => wx.updateAppMessageShareData({
      //     title: '的士同城',
      //     desc: '一个出租车信息交互平台',
      //     link: location.href,
      //     imgUrl: 'http://twst.isart.me/20190903145309_3xmXFt_Screenshot.png',
      //
      //     success (){
      //       console.log('设置分享链接成功')
      //     }
      //   }))
      // })
    }
  }
};
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
@import '~@/styles/main.less';

.hidePicker {
  position: fixed !important;
  left: -9999px;
}
</style>
